<template>

    <div v-if="headerNav" class="header-nav">
      <span class="tool-nav-left" @click="goBack">❮</span>
      <div class="tool-nav">
          <span @click="scrollToSection('shopping')">
              <span><a>商品</a></span>
              <div :class="{'nav-status': currentSection === 'shopping'}"></div>
          </span>
          <span @click="scrollToSection('evalu')">
              <span><a>评价</a></span>
              <div :class="{'nav-status': currentSection === 'evalu'}"></div>
          </span>
          <span @click="scrollToSection('detail')">
              <span><a>详情</a></span>
              <div :class="{'nav-status': currentSection === 'detail'}"></div>
          </span>
          <span @click="scrollToSection('recommend')">
              <span><a>推荐</a></span>
              <div :class="{'nav-status': currentSection === 'recommend'}"></div>
          </span>
      </div>
      <span class="tool-nav-right" @click="toggleShareMenu"><img src="/public/images/share-black.svg" /></span>
  </div>

  <div>
      <div class="back-button" @click="goBack">
          <span class="arrow">❮</span>
      </div>
      <div class="share-button" @click="toggleShareMenu">
          <span class="arrow"><img src="/public/images/share-white.svg"></span>
      </div>
  </div>

  <ShareFrame :isShareMenuVisible="isShareMenuVisible" />

</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import ShareFrame from './ShareFrame.vue';

const router = useRouter();

const goBack = () => {
  router.back();
};

const isShareMenuVisible = ref(false);

const toggleShareMenu = () => {
  isShareMenuVisible.value = true;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  window.scrollTo(0, 0);
  window.addEventListener('click', closeShare);
});

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll);
});

//  关闭分享的弹窗
const closeShare = (event) => {
    if (isShareMenuVisible.value) {
        const className = event.target.className;
        if (className === 'share-qr-code' || className === 'share-icon' || className === 'close-share') {
            isShareMenuVisible.value = false;
        }
    }
}

const headerNav = ref(false);

//头部导航栏点击效果状态
const currentSection = ref('shopping');

// 滚动处理函数
const handleScroll = () => {
  // 获取当前页面的垂直滚动距离
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 判断滚动距离是否超过40px
  headerNav.value = scrollTop > 40;

  const sections = ['shopping', 'evalu', 'detail', 'recommend'];

  sections.forEach((sectionId) => {
    const section = document.getElementById(sectionId);
    const rect = section.getBoundingClientRect();

    // 判断当前滚动是否在该锚点区域
    if (rect.top >= 0 && rect.top < window.innerHeight / 2.5) {
      currentSection.value = sectionId;
    }
  });
};

//头部导航的锚点滚动
const scrollToSection = (id) => {
  const section = document.getElementById(id);
  if (section) {
    section.scrollIntoView({ behavior: 'smooth' });
    currentSection.value = id;
  }
};

</script>

<style scoped>
.header-nav {
  border: 1px solid aliceblue;
  height: 40px;
  width: 99.9%;
  z-index: 102;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  font-size: 12px;
  overflow: hidden;
  text-align: center;
}
.header-nav .tool-nav {
  margin: auto 1px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.header-nav .tool-nav span{
  margin: auto 5px;
  width: 35px;
  height: 20px;
  float: left;
  cursor: pointer;
}
.header-nav .tool-nav .nav-status {
  border: 2px solid #4a86e8;
  margin: auto;
  border-radius: 50px;
  margin-top: 25px;
  margin-left: 8px;
  width: 70%;
  cursor: pointer;
}
.header-nav .tool-nav a {
  font-weight: bold;
  color: #434343;
}
.header-nav .tool-nav-left {
  font-size: 16px;
  margin: auto;
  margin-left: 18px;
  font-weight: bold;
  cursor: pointer;
}
.header-nav .tool-nav-right {
  font-size: 16px;
  margin: auto;
  margin-right: 18px;
  font-weight: bold;
  cursor: pointer;
}


.back-button {
    position: fixed;
    top: 5px; /* 距离顶部的距离 */
    left: 10px; /* 距离左边的距离 */
    width: 30px; /* 按钮的宽度 */
    height: 30px; /* 按钮的高度 */
    border-radius: 50%; /* 圆形按钮 */
    background-color: rgba(0, 0, 0, 0.4); /* 按钮背景色 */
    color: white; /* 箭头颜色 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 12; /* 确保在最上层 */
    margin: auto 0px;
}
.share-button {
  position: fixed;
  top: 5px; /* 距离顶部的距离 */
  right: 10px; /* 距离左边的距离 */
  width: 30px; /* 按钮的宽度 */
  height: 30px; /* 按钮的高度 */
  border-radius: 50%; /* 圆形按钮 */
  background-color: rgba(0, 0, 0, 0.4); /* 按钮背景色 */
  color: white; /* 箭头颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 12; /* 确保在最上层 */
  margin: auto 0px;
}
.arrow {
  font-size: 16px; /* 箭头大小 */
}

</style>